import React, { useEffect, useState } from 'react';
import { Form } from 'antd';
import { AxUpdateGridThreeForm } from '@/components/AxForm/AxUpdateForm';
import { AxLabel } from '@/components/AxForm/AxFormItem/AxLabel';
import { axhttp } from '@/shared/axhttp';
import { axurl } from '@/shared/axurl';
import { AxFroalaEditorView } from '@/components/AxForm/AxFormItem/AxFroalaEditor';

const { getX } = axhttp;
const url = axurl.navigation.notice;
const Detail = (props: any) => {
    const { id } = props;
    const [data, setData] = useState<any>({});

    useEffect(() => {
        getX(url.readDetail, { announceId: id }).then(res => {
            setData(res.data);
        });
    }, [id])

    return (
        <AxUpdateGridThreeForm
            {...props}
            title="公告详情"
            footer={null}
            items={[
                <AxLabel label="标题" field="title" value={data.title} wholerow='three' />,
                <AxLabel label="公告类型" field="noticeTypeName" value={data.noticeTypeName} wholerow='three' />,
                <AxLabel label="内容" field="content" wholerow='three' >
                    <AxFroalaEditorView model={data.content} />
                </AxLabel>,
            ]}
        />
    );
};

export default Form.create<any>()(Detail);
